{{left_sidebar_enabled  = False
  right_sidebar_enabled = True}}
{{extend 'layout.html'}}

<!-- load dojo and provide config via data attribute -->
<script src="{{=URL('static','dojo/dojo/dojo.js')}}" data-dojo-config="async: true"></script>

<link rel="stylesheet" href="{{=URL('static','css/form_comunicaciones.css')}}" type="text/css" media="all" />


<div id = "button_recargar_ultimo">
{{=A(T("Continuar comunicacion"), _href=URL(request.application, 'reload', 'comunicacion_recarga'), _class='button',
     _style='margin-top: 1em;')}}
</div>

<button id = "button_ver" onclick="ver_datos();">Ver</button>

<strong><span id="availabilityNode"></span></strong>


<script>
    // Require the Dialog class
    require(["dijit/form/RadioButton","dijit/registry", "dojo/_base/xhr", "dojo/on", "dojo/dom", "dojo/dom-class", "dijit/Dialog","dojo/domReady!"], function(RadioButton,registry, xhr, on, dom, domClass, Dialog) {
        
		var availabilityNode = dom.byId("availabilityNode");
		var condicionNode = dom.byId("no_table_condicion");	
		var nroDocumentoNode = dom.byId("no_table_nro_documento");
		var nroDocumentoRow = dom.byId("no_table_nro_documento__row");
		var tipoDocumentoNode = dom.byId("no_table_tipo_documento");	
		var tipoDocumentoRow = dom.byId("no_table_tipo_documento__row");	
		var cuitNode = dom.byId("no_table_cuit");	
		var cuitRow = dom.byId("no_table_cuit__row");
		var cuilNode = dom.byId("no_table_cuil");	
		var cuilRow = dom.byId("no_table_cuil__row");
		var telefonoNode = dom.byId("no_table_telefono");	
		var telefonoRow = dom.byId("no_table_telefono__row");
		var mailNode = dom.byId("no_table_mail");	
		var mailRow = dom.byId("no_table_mail__row");
		var nombreNode = dom.byId("no_table_nombre");	
		var nombreRow = dom.byId("no_table_nombre__row");
		var generoNode = dom.byId("no_table_genero");	
		var generoRow = dom.byId("no_table_genero__row");
		var button_ver = dom.byId("button_ver");
		
		
		var dialog = new Dialog({
        });

		ocultar_campos = function(){
			availabilityNode.innerHTML = '';
        	var value_condicion = condicionNode.value;
        	
        	domClass.add(nombreRow, "escondido");
        	domClass.add(nroDocumentoRow, "escondido");
		    domClass.add(tipoDocumentoRow, "escondido");
		    domClass.add(cuitRow,"escondido");
			domClass.add(cuilRow,"escondido");
			domClass.add(telefonoRow,"escondido");
			domClass.add(mailRow,"escondido");
			domClass.add(generoRow,"escondido");
			domClass.add(button_ver, "escondido");
		
        	
        	switch (value_condicion){
        		case '1': //afiliado
        			button_ver.innerHTML = 'Ver Afiliado';
        			domClass.remove(button_ver, "escondido");
        			domClass.remove(nombreRow, "escondido");
	        		domClass.remove(nroDocumentoRow, "escondido");
		        	domClass.remove(tipoDocumentoRow, "escondido");
					domClass.remove(telefonoRow,"escondido");
					domClass.remove(mailRow,"escondido");
        		break;
        		case '2': //no afiliado
        			domClass.remove(nombreRow, "escondido");
					domClass.remove(telefonoRow,"escondido");
					domClass.remove(mailRow,"escondido");
					domClass.remove(generoRow,"escondido");
        		break;
        		case '3': //empleador
        			button_ver.innerHTML = 'Ver Empleador';
        			domClass.remove(button_ver, "escondido");
					domClass.remove(telefonoRow,"escondido");
					domClass.remove(mailRow,"escondido");
					domClass.remove(cuitRow,"escondido");
        		break;
        		case '4': //prestador
        			domClass.remove(nombreRow, "escondido");
					domClass.remove(telefonoRow,"escondido");
					domClass.remove(mailRow,"escondido");
					domClass.remove(cuitRow,"escondido");
        		break;
        		default:  //vacio
        			domClass.add(nroDocumentoRow, "escondido");
				    domClass.add(tipoDocumentoRow, "escondido");
				    domClass.add(cuitRow,"escondido");
					domClass.add(cuilRow,"escondido");
					domClass.add(telefonoRow,"escondido");
					domClass.add(mailRow,"escondido");
					domClass.add(generoRow,"escondido");
					domClass.add(button_ver, "escondido");
        	}
		}
		        
        ocultar_campos();
		
		ver_datos = function(){
			var value_condicion = condicionNode.value;
        	
        	switch (value_condicion){
        		case '1': //afiliado
	        		ver_afiliado();
        		break;
        		case '3': //empleador
        			ver_empleador();
        		break;
        	}
		};
	
		// EMPLEADOR
		
		ver_empleador = function(){
			if(cuitNode.value != ""){
				xhr.get({
					// URL de la request
					url: '{{=URL(r = request, c = "comunicacion", f="buscar_empleador_por_cuit")}}',
					handleAs: "json",
					// Enviar los datos para checkear en la db 
					content: {
						cuit : cuitNode.value
					},
					load: function(response) {
						if(response.error == "") {
							showDialog_datos_empleador(response);
						}
					}
				});
			}
		}
		
		showDialog_datos_empleador = function(response){
			//var dialog = registry.byId("terms");
			if (response.error == ""){
				var result = '<p><strong>Datos del empleador</strong></p>';
				result += '<div style="height:100px;overflow-y:scroll;border:1px solid #769dc4;padding:0 10px;width:300px">';
	        	result += '<label>CUIT: </label>' + " " + response.cuit;
	        	result += '</br>';
	        	result += '<label>Razon social: </label>' + " " + response.razon_social;
	        	result +=  '</div>';
	        	result += '</br>';
	        	result += '<button onclick="hideDialog();">Aceptar</button>';
	        	dialog.set("content", result);
				dialog.show();
			}
		}
		
		check_empleador = function(){
			
			// tomar los valores
			var value_cuit = cuitNode.value;		
			var value_condicion = condicionNode.value;	
			
			// poner a cero el cuit
			domClass.add(availabilityNode,"demoTaken");
			domClass.remove(availabilityNode,"demoAvailable");
			availabilityNode.innerHTML = "Empleador no encontrado."
			
			if(value_condicion == "3" & value_cuit != "" & value_cuit.length > 2) {
				
				xhr.get({
					// URL de la request
					url: '{{=URL(r = request, c = "comunicacion", f="buscar_empleador_por_cuit")}}',
					handleAs: "json",
					// Permitir solo 2 segundos para checkear empleador
					timeout: 2000,
					// Enviar los datos para checkear en la db 
					content: {
						cuit : value_cuit
					},
					// The success callback with result from server
					load: function(response,ioargs) {
						if(response.error == "") {
							domClass.add(availabilityNode,"demoAvailable");
							domClass.remove(availabilityNode,"demoTaken");
							availabilityNode.innerHTML = "Empleador encontrado!";
							cuitNode.value = response.cuit;
							nombreNode.value = response.razon_social;
							showDialog_datos_empleador(response);
						}
						else{ 
							domClass.add(availabilityNode,"demoTaken");
							domClass.remove(availabilityNode,"demoAvailable");
							nombreNode.value = "";
							availabilityNode.innerHTML = "Empleador no encontrado.";
						}
					},
					error:function(response, ioargs){
						cuitNode.value = "";
						console.log(ioargs.xhr.status+"error"+response);
					}
				});
			}
			else {
				availabilityNode.innerHTML = "";
			}
		};
		
		// AFILIADO
		
		ver_afiliado = function(){
			if(cuilNode.value != ""){
				xhr.get({
					// URL de la request
					url: '{{=URL(r = request, c = "comunicacion", f="buscar_afiliado_por_cuil")}}',
					handleAs: "json",
					// Enviar los datos para checkear en la db 
					content: {
						cuil : cuilNode.value
					},
					load: function(response) {
						showDialog_datos_afiliado(response);
						
					}
				});
			}
		}
		
		showDialog_datos_afiliado = function(response){
			//var dialog = registry.byId("terms");
			var result = '<p><strong>Datos del afiliado</strong></p>';
				result += '<div style="height:250px;overflow-y:scroll;border:1px solid #769dc4;padding:0 10px;width:300px">';
	        	result += '<label>CUIL: </label>' + " " + response.cuil;
	        	result += '</br>';
	        	result += '<label>Tipo doc: </label>' + " " + response.tipo_documento;
	        	result += '</br>';
	        	result += '<label>Nro doc: </label>' + " " + response.nro_documento;
	        	result += '</br>';
	        	result += '<label>Nombre: </label>' + " " + response.nombre;
	        	result += '</br>';
	        	result += '<label>Apellido: </label>' + " " + response.apellido;
	        	result += '</br>';
	        	result += '<label>Plan: </label>' + " " + response.plan;
	        	result += '</br>';
	        	result += '<label>Fecha Baja: </label>' + " " + response.fecha_baja;
	        	result += '</br>';
	        	result += '<label>Motivo Baja: </label>' + " " + response.motivo_baja;
	        	result +=  '</div>';
	        	result += '</br>';
				result += '</br>';
	        	result += '<button onclick="hideDialog();">Aceptar</button>';
	        	dialog.set("content", result);
				dialog.show();
		}		
		
        check_afiliado = function(){
			// tomar los valores
			var value_nro = nroDocumentoNode.value;	
			var value_tipo = tipoDocumentoNode.value;	
			var value_condicion = condicionNode.value;	
			
			// poner a cero el cuil
			domClass.add(availabilityNode,"demoTaken");
			domClass.remove(availabilityNode,"demoAvailable");
			cuilNode.value = "";
			availabilityNode.innerHTML = "Afiliado no encontrado."
			
			if(value_condicion == "1" & value_nro != "" & value_tipo != "" & value_nro.length > 2) {
				
				xhr.get({
					// URL de la request
					url: "check_afiliado_por_tipo_nro_doc",
					handleAs: "json",
					// Permitir solo 2 segundos para checkear afiliado
					timeout: 2000,
					// Enviar los datos para checkear en la db 
					content: {
						tipo_documento : value_tipo,
						nro_documento: value_nro
					},
					// The success callback with result from server
					load: function(response,ioargs) {
						if(response.error == "") {
							domClass.add(availabilityNode,"demoAvailable");
							domClass.remove(availabilityNode,"demoTaken");
							availabilityNode.innerHTML = "Afiliado encontrado!";
							cuilNode.value = response.cuil;
							nombreNode.value = response.nombre + " " + response.apellido
							showDialog_check_afiliado(response);
						}
						else{ 
							if(response.error == 'Mas de un afiliado encontrado'){
								domClass.add(availabilityNode,"demoTaken");
								domClass.remove(availabilityNode,"demoAvailable");
								availabilityNode.innerHTML = 'Mas de un afiliado encontrado';
								cuilNode.value = "";
								nombreNode.value = "";
								showDialog_check_afiliado(response);
							}
							else {
								domClass.add(availabilityNode,"demoTaken");
								domClass.remove(availabilityNode,"demoAvailable");
								cuilNode.value = "";
								nombreNode.value = "";
								availabilityNode.innerHTML = "Afiliado no encontrado.";
							}
						}
					},
					error:function(response, ioargs){
						console.log(ioargs.xhr.status+"error"+response);
					}
				});
			}
			else {
				availabilityNode.innerHTML = "";
			}
		};		
		
		showDialog_check_afiliado = function(response){
			
			if (response.error == ""){
				ver_afiliado();
			}
			else{
				//var dialog = registry.byId("terms");
				var result = '<label><strong>' + response.error + '</strong></label>';
				if (response.error == "Mas de un afiliado encontrado"){
					result += '<div style="height:160px;overflow-y:scroll;border:1px solid #769dc4;padding:0 10px;width:200px">';
					result += '</br>';
					afiliados = response.afiliados;
					for (afiliado in afiliados){
				  		result += '<label class="select_afil" onclick="agregar_datos_afiliado('+afiliados[afiliado]+');">'+afiliados[afiliado].nombre+'</label>';
	        			result += '</br>';
				  	}
				  	result +=  '</div>';
		        	result += '</br>';
					result += '</br>';
					//result += '{{=A(T("Cambiar a No Afiliado"), _href=URL("examples","default","index"))}}';
		        	result += '<button onclick="hideDialog();">Aceptar</button>';
				}
				dialog.set("content", result);
				dialog.show();
			}
		}
		
		agregar_datos_afiliado = function(afiliado){
			cuilNode.value = afiliado.cuil;
			nombreNode.value = afiliado.nombre + ' ' + afiliado.apellido;
			hideDialog();
			domClass.add(availabilityNode,"demoAvailable");
			domClass.remove(availabilityNode,"demoTaken");
			availabilityNode.innerHTML = "Afiliado encontrado!";
			ver_afiliado();
		}

        hideDialog = function() {
        	dialog.hide();
            //registry.byId("terms").hide();
        }
		 
        mostrar = function(datos){
			//var dialog = registry.byId("terms");
			dialog.set("content", datos);
			dialog.show();
        }	
    
        // Connect //
		on(nroDocumentoNode, "keyup", check_afiliado);
		on(tipoDocumentoNode, "change", check_afiliado);
		on(cuitNode, "keyup", check_empleador);
		on(condicionNode, "change", ocultar_campos);
    });
</script>
 
<!-- 
<div class="dijitHidden">
    <div data-dojo-type="dijit.Dialog" style="width:350px; heigh:500px;" data-dojo-props="title:'Busqueda'" id="terms">
    </div>
</div>
-->


{{=form}}

{{if request.is_local:}}
{{=response.toolbar()}}
{{=form_error}}
{{pass}}


 <script>
			
			// Require the Tooltip class
			require(["dijit/Tooltip","dojo/domReady!"], function(Tooltip){
				// When the DOM and reources are ready....
				
				// Add tooltip of his picture
				new Tooltip({
					connectId: ["mision"],
					label: "Atender adecuadamente todas las llamadas entrantes recibidas al n&uacute;mero 0810-666-7752. Debe facilitar y orientar adecuadamente, de acuerdo a los distintos motivos de los llamados entrantes brindando la informaci&oacute;n requerida o derivando seg&uacute;n corresponda para su correcta resoluci&oacuten. Tambi&eacutenn ser&aacute;n el encargado de responder y/o orientar adecuadamente los correos que ingresen al mail institucional. info@osplad.org.ar"
				});
				
				new Tooltip({
					connectId: ["empatia"],
					label: "Capacidad de una persona para escuchar, entender, adaptarse y valorar adecuadamente las actitudes, necesidades y comportamientos de otra persona, consiguiendo con ello &quot;ponerse en su lugar&quot;. Capacidad para escuchar, interpretar y entender los intereses, emociones, sentimientos, o preocupaciones de los otros teni&eacutendolos en cuenta, por lo tanto, a la hora de definir una alternativa de respuesta"
				});
				
				new Tooltip({
					connectId: ["atencion"],
					label: "Osplad buenos d&iacuteas, mi nombre es XXXXX &iquest;En qu&eacute puedo ayudarlo? Identificaci&oacuten si el llamado corresponde al campo AFILIADO/ NO AFILIADO/ EMPLEADOR"
				});
});
</script>

{{block right_sidebar}}
<!--{{=A(T("Administrative Interface"), _href=URL('admin','default','index'), _class='button',
     _style='margin-top: 1em;')}}-->
<h5>{{=T("Tips de atencion")}}</h5>

<ul>
	<li><span id="mision" class="tTip">misi&oacute;n</span></li>
	<li><span id="empatia" class="tTip">empat&iacute;a</span></li>
	<li><span id="atencion" class="tTip">atenci&oacute;n</span></li>
</ul>

<h5>{{=T("Links institucionales")}}</h5>

<ul>
  <!--<li>{{=A(T("Online examples"), _href=URL('examples','default','index'))}}</li>
  <li><a href="http://web2py.com">web2py.com</a></li>
  <li><a href="http://web2py.com/book">{{=T('Documentation')}}</a></li>-->
  <li>{{=LINK_COBERTURA}}</li>
  <li>{{=LINK_BENEFICIOS}}</li> 
  <li>{{=LINK_CARTILLAS}}</li> 
  <li>{{=LINK_CODEM}}</li>    
  <li>{{=LINK_OPCION_OBSBA}}</li>
  <li>{{=LINK_PADRON_SUPER}}</li>
  <li>{{=LINK_PROMOCION}}</li>  
  <li>{{=LINK_REQUISITOS_OPCION}}</li>
  <li>{{=LINK_REQUISITOS_AFILIACION}}</li>
  <li>{{=LINK_SALUD}}</li> 
  <li>{{=LINK_SEDES}}</li>
  <li>{{=LINK_TURISMO}}</li>  
  <li>{{=LINK_SALUD}}</li>  
  <li>{{=LINK_WEBMAIL}}</li>  
</ul>

{{end}}


<!-- 
	<button id="myButton">Buscar Afiliado</button>
	<script>
	require(["dojo/on", "dojo/dom", "dojo/_base/lang", "dojo/domReady!"],
    function(on, dom, lang) {
        
        var myScopedButton1 = dom.byId("myButton"),
        	tipo_doc = dom.byId("no_table_tipo_documento"),
        	nro_doc = dom.byId("no_table_nro_documento"),
            myObject = {
                id: "myObject",
                onClick: function(evt){
                	document.getElementById("no_table_nombre").value = "NOMBRE"
                	document.getElementById("no_table_apellido").value = "APELLIDO"
                    alert("The scope of this handler is " + this.id + " " + tipo_doc.value + " " + nro_doc.value);
                }
            };
 
        // This will alert "myScopedButton1"
        on(myScopedButton1, "click", myObject.onClick);
        // This will alert "myObject" rather than "myScopedButton2"
        //on(myScopedButton2, "click", lang.hitch(myObject, "onClick"));
 
});
</script>
-->